<style type="text/css">
  
  .well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

.col-md-offset-3 {
    margin-left: 30%;
}

.col-md-6 {
    width: 50%;

}
.panel-page {
    padding: 45px 50px 50px;
    min-height: 500px;
}
.panel-default {
    border-color: #ddd;
}
.panel {
    margin-top: 30px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 70%;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
</style>

<div id="content-container main"  style=" background-color: #f5f5f5;" >
            <div class="row row-6" >
  <div class="col-md-6 col-md-offset-3">

    <div class="panel panel-default panel-page" style="background-color: white;border:none;padding: 20px 50px 50px;
    min-height: 500px;">
      <div class="panel-heading" style="background-color: white"><h2>绑定</h2></div>

        <div class="well well-sm">

          <div class="media">
            <a class="pull-left" href="javascript:">
              <img class="media-object" src="<?php echo $qqReturnRes['user_info']['figureurl_qq_2'] ?>">
            </a>
            <div class="media-body">
              <div><strong>　</strong></div>
              <div class="text-muted">您正在使用<strong class="text-primary"> QQ帐号 </strong>登录SegementFault学院</div>
            </div>
          </div>

        </div>
      
       <form id="set-bind-exist-form" class="form-vertical" method="post" novalidate="novalidate" data-widget-cid="widget-1" action="{:U('home/Register/bindPersonInfo')}">
          <div class="form-group">
            <label class="control-label" for="set-bind-email-field">邮箱地址</label>
            <div class="controls">
              <input id="email" class="form-control checklgstatus" ok='' type="text" name="email" data-url="/register/email/check" data-widget-cid="widget-3" data-explain="">
              <span class="notice"></span>
            </div>
            <input type="hidden" name="openid" value="<?php echo  $qqReturnRes['openid'] ?>" >
            <input type="hidden" name="face" value="<?php echo $qqReturnRes['user_info']['figureurl_qq_2'] ?>">
          </div>

          <div class="form-group">
            <label class="control-label" for="set-bind-nickname-field">密码</label>
            <div class="controls">
              <input id="password" ok='' class="form-control checklgstatus" type="text" name="name"  data-url="/register/nickname/check" data-widget-cid="widget-5" data-explain="推荐用现在这个，也可以另外取一个。最长14个英文或者7个汉字">
              <p class="help-block">推荐用现在这个，也可以另外取一个。最长14个英文或者7个汉字</p>
              <span class="notice"></span>
            </div>
          </div>

         

          
        <div class="tac pvl" style="text-align:center;">
          <div class="alert alert-danger" id="bind-new-form-error" style="display:none;"></div>

       
            <button id="submitbtn" class="btn btn-primary btn-lg" data-url="/login/bind/qq/newset" data-loading-text="正在登录..." data-goto="/" disabled="disabled" >确认绑定</button>
        
        

                </div></form>
        <hr>

        <p class="text-primary">
          已有帐号？绑定到已有帐号：
          <a href="/login/bind/qq/exist"></a>
        </p>

        <form id="bind-exist-form" class="form-vertical" method="post" action="/login/bind/qq/exist" data-goto="/" novalidate="novalidate" data-widget-cid="widget-0">

          <div class="alert alert-danger" id="bind-exist-form-error" style="display:none;"></div>


          <div class="form-group">
            <label class="control-label" for="bind-email-field">Email地址</label>
            <div class="controls">
              <input id="bind-email-field" class="form-control" type="text" name="email" data-widget-cid="widget-2" data-explain="请填写在大牛学院注册时填写的Email地址">
              <p class="help-block">请填写在大牛学院注册时填写的Email地址</p>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label" for="bind-password-field">密码</label>
            <div class="controls">
              <input id="bind-password-field" class="form-control" type="password" name="password" data-widget-cid="widget-4" data-explain="">
            <div class="help-block" style="display:none;"></div></div>
          </div>

          <div class="form-group">
            <div class="controls">
              <button class="btn btn-fat btn-default btn-lg" type="submit" data-loading-text="正在提交...">绑定</button>
            </div>
          </div>

          <input type="hidden" name="_csrf_token" value="98871918179973b27026a0b34b45039b794f53db">
        </form>

        <div class="form-group">

        </div>

    </div>

  </div>
</div>
    </div>

    <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //绑定用户js
        $('#email,#password').blur(function(event) {
            var thisValue = $(this).val();
            var thisObj = $(this);
            var currentName = $(this).attr('id');
            $.ajax({
                url: '{:U("Home/Register/checkInput")}',
                type: 'POST',
                dataType: 'json',
                data: currentName + "=" + thisValue,
                success:function(data){
                    if(data.error == 0){
                        thisObj.siblings('.notice').html('<span style="color:blue">'+data.content+'</span>');
                        thisObj.attr('ok', 'ok');
                        var inputObjs = $('.checklgstatus');
                        var c = 1;
                        $.each(inputObjs, function(index, val) {
                            if($(this).attr('ok') == ''){
                                c = 0;
                            }
                        });

                        if(c){
                            $('#submitbtn').removeAttr('disabled');
                        }
                    }else{
                        thisObj.siblings('.notice').html('<span style="color:red">'+data.content+'</span>');
                        thisObj.attr('ok', '');
                        $('#submitbtn').attr('disabled', 'disabled');
                    }
                },
                error:function(){
                    alert('通信有误');
                },
            })
        });

    });
</script>